<template>
  <div class="all">
    <el-form :model="oumubiaoform" ref="oumubiaoform" class="demo-oumubiaoform">
      <h4>一、实验数据记录与处理（共75分）</h4>
      <div class="addmargin">
        <p class="addmargin">1. 待改装微安表参数记录(每空5分，共15分)</p>
        <!-- 第一个表-1.箱式直流电桥测量电阻值 -->
        <!-- 第一个表-1.箱式直流电桥测量电阻值 -->
        <hot-table
          :settings="OuMuBiaoSettingsOne"
          :rowHeaders="false"
          :colHeaders="false"
        ></hot-table>
        <div>
          <p class="addmargin">
            2.
            各电阻阻值设置计算(要求四舍五入精确到小数点后1位，每空5分，共45分)
          </p>
          <p class="addmargin">
            调零电阻R1计算（理论值）<br />
            根据电路图，单刀开关开启，短接红黑表笔，此时调零电阻计算公式为：R1=E/Ig-Rg，
          </p>
          <p class="addmargin">
            代入E=
            <input
              onkeyup="value=value.replace(/[^\d.]/g,'')"
              style="width: 70px"
              type="text"
              v-model="oumubiaoform.e1"
            />
            V, Ig=
            <input
              onkeyup="value=value.replace(/[^\d.]/g,'')"
              style="width: 70px"
              type="text"
              v-model="oumubiaoform.i"
            />
            μA, Rg=
            <input
              onkeyup="value=value.replace(/[^\d.]/g,'')"
              style="width: 70px"
              type="text"
              v-model="oumubiaoform.ig2"
            />
            Ω，
          </p>
          <p class="addmargin">
            计算出R1=
            <input
              onkeyup="value=value.replace(/[^\d.]/g,'')"
              style="width: 70px"
              type="text"
              v-model="oumubiaoform.r1"
            />
            Ω
          </p>
          <p class="addmargin">
            调零电阻R2计算（理论值）<br />
            根据电路图，单刀开关闭合，红黑表笔接100Ω电阻，此时校准电阻计算公式为：R2=[0.00015×(R1+Rg)]/[(E-0.00015×(R1+Rg))/100-0.00015]，
          </p>
          <p class="addmargin">
            代入E=
            <input
              onkeyup="value=value.replace(/[^\d.]/g,'')"
              style="width: 70px"
              type="text"
              v-model="oumubiaoform.e2"
            />
            V,R1=
            <input
              onkeyup="value=value.replace(/[^\d.]/g,'')"
              style="width: 70px"
              type="text"
              v-model="oumubiaoform.rb"
            />
            Ω, Rg=<input
              onkeyup="value=value.replace(/[^\d.]/g,'')"
              style="width: 70px"
              type="text"
              v-model="oumubiaoform.rg2"
            />
            Ω，
          </p>
          <p class="addmargin">
            计算出R2=
            <input
              onkeyup="value=value.replace(/[^\d.]/g,'')"
              style="width: 70px"
              type="text"
              v-model="oumubiaoform.r2"
            />
            Ω
          </p>
        </div>
        <p class="addmargin">
          3. 欧姆表改装设计实验数据记录表(每空5分，共15分，截图分值另计)
        </p>
        <table cellspacing="0 " style="width: 100%" class="table">
        </table>
        <div>
        <hot-table
          :settings="OuMuBiaoSettingsTwo"
          :rowHeaders="false"
          :colHeaders="false"
          style="width: 70%;float: left;margin-top: 5%"
        ></hot-table>
            <div style="width: 30%;float: right;font-size: 10px;color: #888;">
              Rx表头测量数据截图，要求将Rx读数标记在图上（5分）
              <el-upload
                class="avatar-uploader"
                action="http://47.108.217.249/api/upload"
                :show-file-list="false"
                :on-success="RxSuccess"
                :before-upload="beforeAvatarUpload"
              >
              <div style="text-align: center">
                <img
                  v-if="oumubiaoform.p1"
                  :src="oumubiaoform.p1"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </div>
              </el-upload>
            </div>
          </div>
          <table cellspacing="0 " style="width: 100%" class="table">
        </table>
          <div style="text-align: center;margin-top: 5%">
              <p>
                实验电路连线截图（5分）
              </p>
            <div class="notboder">
              <el-upload
                action="http://47.108.217.249/api/upload"
                :show-file-list="false"
                :on-success="shiyanSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="oumubiaoform.p2"
                  :src="oumubiaoform.p2"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
        </div>
        <table cellspacing="0 " style="width: 100%" class="table">
        </table>
        <!-- <table cellspacing="0 " style="width: 650px" class="table">
          <tr>
            <th rowspan="4">欧姆表的改装设计</th>
            <th style="width: 70px">改装要求</th>
            <th colspan="3">量程比率×1Ω</th>
            <th style="width: 130px" rowspan="4">
              Rx表头测量数据截图，要求将Rx读数标记在图上（5分）
              <el-upload
                class="avatar-uploader"
                action="http://47.108.217.249/api/upload"
                :show-file-list="false"
                :on-success="RxSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="oumubiaoform.p1"
                  :src="oumubiaoform.p1"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </th>
          </tr>
          <tr>
            <th rowspan="2">改装计算</th>
            <th style="width: 100px；">调零电阻R1=</th>
            <th>
              <input
                onkeyup="value=value.replace(/[^\d.]/g,'')"
                type="text"
                v-model="oumubiaoform.r3"
              />
            </th>
            <th style="width: 50px">Ω</th>
          </tr>
          <tr>
            <th style="heigth: 50px">校准电阻R2=</th>
            <th>
              <input
                onkeyup="value=value.replace(/[^\d.]/g,'')"
                type="text"
                v-model="oumubiaoform.r4"
              />
            </th>
            <th>Ω</th>
          </tr>
          <tr>
            <th>测量电阻</th>
            <th>Rx=</th>
            <th>
              <input
                onkeyup="value=value.replace(/[^\d.]/g,'')"
                type="text"
                v-model="oumubiaoform.rx"
              />
            </th>
            <th>Ω</th>
          </tr>
          <tr>
            <th colspan="6" class="nobboder">
              <p style="float: left; display: block; margin-left: 10px">
                实验电路连线截图（5分）
              </p>
            </th>
          </tr>
          <tr>
            <th colspan="6" class="notboder">
              <el-upload
                action="http://47.108.217.249/api/upload"
                :show-file-list="false"
                :on-success="shiyanSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="oumubiaoform.p2"
                  :src="oumubiaoform.p2"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </th>
          </tr>
        </table> -->
      </div>
      <h4>二、选择题（每题5分，共15分）</h4>
      <div>1. 关于使用欧姆表欧姆档测电阻的下列说法中正确的是( )</div>
      <img
        class="photo"
        src="https://liuru1.oss-cn-chengdu.aliyuncs.com/img/20220901141309.png"
        alt=""
      />
      <el-form-item>
        <el-radio-group v-model="oumubiaoform.pd1">
          <el-radio label="A">A. 测量阻值不同的电阻时必须重新调零</el-radio
          ><br />
          <el-radio label="B"
            >B. 测量电路中的某个电阻，不需要把该电阻与电路断开</el-radio
          ><br />
          <el-radio label="C"
            >C.
            测量电阻时，为了使测量准确，应当尽量使指针指在中心刻度的附近</el-radio
          ><br />
          <el-radio label="D"
            >D.
            如图为某同学的实验测量结果，指针在a位置处表示被测电阻的阻值为50Ω</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <div>
        2.
        把一个量程为5mA的电流表改装成欧姆表Rx1档，电流表的内阻是50Ω，电池的电动势是1.5v，经过调零之后测电阻，当欧姆表指针指到满偏的3/4位置时，被测电阻的阻值是(
        )
      </div>
      <el-form-item>
        <el-radio-group v-model="oumubiaoform.pd2">
          <el-radio label="A">A. 50 Ω</el-radio><br />
          <el-radio label="B">B. 100 Ω</el-radio><br />
          <el-radio label="C">C. 16.7 Ω </el-radio><br />
          <el-radio label="D">D. 400 Ω</el-radio>
        </el-radio-group>
      </el-form-item>
      <div>3.关于欧姆表，下列说法正确的是( )</div>
      <el-form-item>
        <el-radio-group v-model="oumubiaoform.pd3">
          <el-radio label="A">A. 刻度盘上的刻度是均匀的</el-radio><br />
          <el-radio label="B">B. 指针指在最左边，表示待测电阻为零</el-radio
          ><br />
          <el-radio label="C">C. 指针指在最左边，表示待测电阻为无穷大</el-radio
          ><br />
          <el-radio label="D">D. 欧姆表可以精确的测量电阻</el-radio>
        </el-radio-group>
      </el-form-item>
      <h4>线上资源</h4>
      <p class="addmargin">
        1）在线实验报告系统链接：
        <a style="text-decoration: none" href="http://180.76.111.200:3001/"
          >http://180.76.111.200:3001/</a
        >
      </p>
      <el-form-item>
        <el-button class="btn" plain type="primary" @click="storage()"
          >暂存</el-button
        >
        <el-button class="btn" type="primary" @click="onsubmit('oumubiaoform')"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 暂存按钮的弹窗 -->
    <el-dialog title="提示" :visible.sync="DialogVisible2" width="30%" center>
      <el-divider></el-divider>
      <div style="text-align: center">请 您 确 定 您 是 否 要 暂 存 ？</div>
      <el-divider></el-divider>
      <span slot="footer" class="dialog-footer">
        <el-button plain @click="DialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="(DialogVisible2 = false), storageOk()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { HotTable } from "@handsontable/vue";
import { registerAllModules } from "handsontable/registry";
import "handsontable/dist/handsontable.full.css";

registerAllModules();

export default {
  components: {
    HotTable,
  },
  data() {
    return {
      // 第一个表
      OuMuBiaoSettingsOne: {
        // 指定单元格的某些属性（数组），如下：
        // cell: [
        //     {row:1, col:1, data: 'ra1'},
        //     {row:1, col:2,}
        // ],
        manualRowResize: true, // 自定义行宽
        manualColumnResize: true, // 自定义列高
        preventOverflow: "vertical", // 防止水平溢出表
        headerTooltips: true, // header 内容过长提示
        // 数据部分
        data: [
          // 定义行，一共有3行
          {
            conent: "微安表表头满量程电流Ig",
            danWei: "Ω"
          },
          {
            conent: "表头内阻Rg",
            danWei: "Ω",
          },
          {
            conent: "电池电压E",
            danWei: "Ω",
          },
          {
            conent: "电池电压E",
            danWei: "Ω",
          },
          {
            conent: "电池电压E",
            danWei: "Ω",
          },
          {
            conent: "电池电压E",
            danWei: "Ω",
          },
        ],
        //最大列
        maxCols: 3,
        //最大行
        maxRows: 3,
        autoColumnSize: true, // 自适应列大小
        rowHeights: 30,
        // customBorders:[],//添加边框
        // 合并的列
        // mergeCells: [
        //   { row: 0, col: 4, rowspan: 3, colspan: 1 },
        //   { row: 0, col: 5, rowspan: 3, colspan: 1 },
        //   { row: 0, col: 6, rowspan: 3, colspan: 1 },
        // ],
        // 是否展示行表头,默认是1,2,3等数据,可以['行1','行2']进行自定义展示
        // rowHeaders: ['比例臂','电阻臂R0(Ω)','待测电阻值RX(Ω)'],
        height: "auto",
        // 设置表里的文字水平 + 垂直居中
        className: "htCenter htMiddle",
        rowHeaders: false,
        // 设置固定单元格不可修改
        cells(row, colum) {
          const cellProperties = {};
          if (row === 0 && colum === 0) {
            // cellProperties.editor = false;
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 0 && colum === 2) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 1 && colum === 0) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 1 && colum === 2) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 2 && colum === 0) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 2 && colum === 2) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          return cellProperties;
        },
        // 设置列
        columns: [
          // 第一列
          {
            data: "conent",
            // type: "text",
            editor: false,
            width: 250,
          },
          // 第二列
          {
            data: "",
            width: 250,
            // type: "numeric",
          },
          // 第三列
          {
            data: "danWei",
            width: 250,
          },
        ],
        //自动换行
        autoWrapRow: true,
        // 设置非商业用途属性
        licenseKey: "non-commercial-and-evaluation",
        // 更新设置，暂存显示
        afterUpdateSettings() {
          // console.log(this.getData());
          const oumubiaora1 = window.localStorage.getItem("oumubiaora1");
          if (oumubiaora1 !== "null") {
            this.setDataAtCell(1, 1, oumubiaora1);
          }
          const oumubiaora2 = window.localStorage.getItem("oumubiaora2");
          if (oumubiaora2 !== "null") {
            this.setDataAtCell(1, 2, oumubiaora2);
          }
          const oumubiaora3 = window.localStorage.getItem("oumubiaora3");
          if (oumubiaora3 !== "null") {
            this.setDataAtCell(1, 3, oumubiaora3);
          }
        },
        //数据改变时触发此方法
        afterChange: function (changes, source) {
          // console.log(changes);//null
          // console.log(source);
          // console.log(this.getCellEditor());//获取全部的值
          // 挨个获取需要传给后端的值
          const ra1 = this.getData()[0][1];
          sessionStorage.setItem("ra1", ra1);
          const ra2 = this.getData()[1][1];
          sessionStorage.setItem("ra2", ra2);
          const ra3 = this.getData()[2][1];
          sessionStorage.setItem("ra3", ra3);
        },
      },
      // 第二个表
      OuMuBiaoSettingsTwo: {
        // 指定单元格的某些属性（数组），如下：
        // cell: [
        //     {row:1, col:1, data: 'ra1'},
        //     {row:1, col:2,}
        // ],
        manualRowResize: true, // 自定义行宽
        manualColumnResize: true, // 自定义列高
        preventOverflow: "vertical", // 防止水平溢出表
        headerTooltips: true, // header 内容过长提示
        // 数据部分
        data: [
          // 定义行，一共有4行
          {
            conent: "欧姆表的改装设计",
            conent1: "改装设计",
            conent2: "量程比率 x 1Ω",
          },
          {
            conent1: "改装计算",
            conent2: "调零电阻R1=",
            conent3: "Ω",
          },
          {
            conent2: "",
            conent2: "校准电阻R2=",
            conent3: "Ω",
          },
          {
            conent1: "测量电阻",
            conent2: "Rx=",
            conent3: "Ω",
          },
        ],
        //最大列
        maxCols: 6,
        //最大行
        maxRows: 10,
        autoColumnSize: true, // 自适应列大小
        rowHeights: 30,
        // customBorders:[],//添加边框
        // 合并的列
        mergeCells: [
          { row: 0, col: 0, rowspan: 4, colspan: 1 },
          { row: 0, col: 2, rowspan: 1, colspan: 3 },
          { row: 1, col: 1, rowspan: 2, colspan: 1 }
        ],
        // 是否展示行表头,默认是1,2,3等数据,可以['行1','行2']进行自定义展示
        // rowHeaders: ['比例臂','电阻臂R0(Ω)','待测电阻值RX(Ω)'],
        height: "auto",
        // 设置表里的文字水平 + 垂直居中
        className: "htCenter htMiddle",
        rowHeaders: false,
        // 设置固定单元格不可修改
        cells(row, colum) {
          const cellProperties = {};
          if (row === 0 && colum === 0) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 0 && colum === 1) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 0 && colum === 2) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 1 && colum === 1) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 1 && colum === 2) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 1 && colum === 4) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 2 && colum === 2) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 2 && colum === 4) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 3 && colum === 1) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 3 && colum === 2) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 3 && colum === 4) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          return cellProperties;
        },
        // 设置列
        columns: [
          // 第一列
          {
            data: "conent",
            // type: "text",
            editor: false,
            width: 120,
          },
          // 第二列
          {
            data: "conent1",
            width: 80,
          },
          // 第三列
          {
            data: "conent2",
            width: 100,
          },
          // 第四列
          {
            data: "",
            width: 100,
          },
          // 第五列
          {
            data: "conent3",
            width: 100,
          },
        ],
        //自动换行
        autoWrapRow: true,
        // 设置非商业用途属性
        licenseKey: "non-commercial-and-evaluation",
        // 更新设置，暂存显示
        afterUpdateSettings() {
          // console.log(this.getData());
          const oumubiaora4 = window.localStorage.getItem("oumubiaora4");
          if (oumubiaora4 !== "null") {
            this.setDataAtCell(1, 1, oumubiaora4);
          }
          const oumubiaora5 = window.localStorage.getItem("oumubiaora5");
          if (oumubiaora5 !== "null") {
            this.setDataAtCell(1, 2, oumubiaora5);
          }
          const oumubiaora6 = window.localStorage.getItem("oumubiaora6");
          if (oumubiaora6 !== "null") {
            this.setDataAtCell(1, 3, oumubiaora6);
          }
        },
        //数据改变时触发此方法
        afterChange: function (changes, source) {
          // console.log(changes);//null
          // console.log(source);
          // console.log(this.getCellEditor());//获取全部的值
          // 挨个获取需要传给后端的值
          const ra4 = this.getData()[1][3];
          sessionStorage.setItem("ra4", ra4);
          const ra5 = this.getData()[2][3];
          sessionStorage.setItem("ra5", ra5);
          const ra6 = this.getData()[3][3];
          sessionStorage.setItem("ra6", ra6);
        },
      },
      // 表格
      grade_xp: 0,
      oumubiaoform: {
        // ra: "E/Ig-Rg",
        ig1: "",
        rg1: "",
        e: "",
        e1: "",
        i: "",
        ig2: "",
        r1: "",
        e2: "",
        rb: "",
        rg2: "",
        r2: "",
        r3: "",
        r4: "",
        rx: "",
        p1: "",
        p2: "",
        pd1: "",
        pd2: "",
        pd3: "",
      },
      DialogVisible2: false,
      dialogVisible: false,
      disabled: false,
    };
  },
  created() {
    // 暂存
    this.storageCheck();
    localStorage.setItem("state8", 1);
  },
  // 暂存
  //1 首先进入页面的时候需要监听浏览器的后退按钮，之后在操作的时候执行函数,在mounted中挂载去监听这个事件，并在methods里面添加函数，用来判断执行的条件
  mounted() {
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      const state8 = localStorage.getItem("state8");
      // console.log(state8);
      window.addEventListener("popstate", this.back, false);
    }
  },
  // 暂存
  // 2：需要在退出页面的时候销毁这个监听事件
  destroyed() {
    window.removeEventListener("popstate", this.back, false);
  },
  methods: {
    // 暂存
    back() {
      // console.log(123);
      const state8 = localStorage.getItem("state8");
      // console.log(state8);
      if (state8 == 1) {
        // console.log(1111);
        this.$confirm(
          "检测到未保存的内容，是否在离开页面前保存？",
          "确认信息",
          {
            confirmButtonText: "暂存",
            cancelButtonText: "放弃修改",
            type: "warning",
            center: true,
          }
        )
          .then(() => {
            // this.$router.go(-1)
            // this.DialogVisible = true
            const state8 = localStorage.getItem("state8");
            // console.log(state8)
            // this.$message({
            //   type: "success",
            //   message: "暂存成功！",
            // });
            this.BackStorage();
            if (this.$route.path !== "/home") {
              this.$router.push({ path: "/home" });
            }
            // this.$router.push("/home");
            return false;
          })
          .catch(() => {
            // const state8 = sessionStorage.getItem('state8')
            // console.log(state8)
            this.$message({
              type: "info",
              message: "已取消暂存！",
            });
            if (this.$route.path !== "/home") {
              this.$router.push({ path: "/home" });
            }
            // this.giveUp()
            return false;
          });
      } else {
        // console.log(2222);
        this.$router.push({ path: "/home" });
      }
    },
    // 暂存
    // 放弃保存
    giveUp() {
      // console.log(345);
      window.localStorage.clear();
      if (this.$route.path !== "/home") {
        this.$router.push({ path: "/home" });
      }
    },
    // 测试
    RxSuccess(res, file) {
      this.oumubiaoform.p1 = file.response.data;
    },
    shiyanSuccess(res, file) {
      this.oumubiaoform.p2 = file.response.data;
    },
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG/PNG/JPEG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    async onsubmit() {
      // console.log(this.oumubiaoform.p2);
      // 验证为null
      // console.log(this.grade_xp);
      const ra1 = sessionStorage.getItem("ra1");
      // console.log(ra1)
      this.oumubiaoform.ig1 = ra1;
      const ra2 = sessionStorage.getItem("ra2");
      this.oumubiaoform.rg1 = ra2;
      const ra3 = sessionStorage.getItem("ra3");
      this.oumubiaoform.e = ra3;
      const ra4 = sessionStorage.getItem("ra4");
      // console.log(ra1)
      this.oumubiaoform.r3 = ra4;
      const ra5 = sessionStorage.getItem("ra5");
      this.oumubiaoform.r4 = ra5;
      const ra6 = sessionStorage.getItem("ra6");
      this.oumubiaoform.rx = ra6;
      const { data: res } = await this.$http.post("/api/oumu/luru", {
        grade_xp: this.grade_xp,
        ig1: this.oumubiaoform.ig1,
        rg1: this.oumubiaoform.rg1,
        e: this.oumubiaoform.e,
        e1: this.oumubiaoform.e1,
        i: this.oumubiaoform.i,
        ig2: this.oumubiaoform.ig2,
        r1: this.oumubiaoform.r1,
        e2: this.oumubiaoform.e2,
        rb: this.oumubiaoform.rb,
        rg2: this.oumubiaoform.rg2,
        r2: this.oumubiaoform.r2,
        r3: this.oumubiaoform.r3,
        r4: this.oumubiaoform.r4,
        rx: this.oumubiaoform.rx,
        p1: this.oumubiaoform.p1,
        p2: this.oumubiaoform.p2,
        pd1: this.oumubiaoform.pd1,
        pd2: this.oumubiaoform.pd2,
        pd3: this.oumubiaoform.pd3,
      });
      // console.log(res);
      if (res.data.res1 == false) {
        this.$message.error("请勿重复提交！");
        this.$router.push("/home");
      } else {
        if (res.code == 100) {
          this.$message.error("提交失败！");
          this.grade_xp = 0;
        }
        if (res.code == 150) {
          this.$message.error("请勿重复提交！");
        }
        if (res.code == 422) {
          this.$message.error("请填完所有题目");
          this.grade_xp = 0;
        }
        if (res.code == 200) {
          // 暂存
          window.localStorage.clear();
          this.$message.success("提交成功！");
          // localStorage.setItem("state8", 2);
          this.$router.push("/home");
        }
      }
    },
    // 暂存弹窗出现
    storage() {
      this.DialogVisible2 = true;
    },
    // 暂存弹窗里面的确定按钮
    storageOk() {
      const ra1 = sessionStorage.getItem("ra1");
      // console.log(ra1)
      this.oumubiaoform.ig1 = ra1;
      const ra2 = sessionStorage.getItem("ra2");
      this.oumubiaoform.rg1 = ra2;
      const ra3 = sessionStorage.getItem("ra3");
      this.oumubiaoform.e = ra3;
      const ra4 = sessionStorage.getItem("ra4");
      // console.log(ra1)
      this.oumubiaoform.r3 = ra4;
      const ra5 = sessionStorage.getItem("ra5");
      this.oumubiaoform.r4 = ra5;
      const ra6 = sessionStorage.getItem("ra6");
      this.oumubiaoform.rx = ra6;
      window.localStorage.setItem("oumugrade_xp", this.oumubiaoform.grade_xp);
      window.localStorage.setItem("oumuig1", this.oumubiaoform.ig1);
      window.localStorage.setItem("oumurg1", this.oumubiaoform.rg1);
      window.localStorage.setItem("oumue", this.oumubiaoform.e);
      window.localStorage.setItem("oumue1", this.oumubiaoform.e1);
      window.localStorage.setItem("oumui", this.oumubiaoform.i);
      window.localStorage.setItem("oumuig2", this.oumubiaoform.ig2);
      window.localStorage.setItem("oumur1", this.oumubiaoform.r1);
      window.localStorage.setItem("oumue2", this.oumubiaoform.e2);
      window.localStorage.setItem("oumurb", this.oumubiaoform.rb);
      window.localStorage.setItem("oumurg2", this.oumubiaoform.rg2);
      window.localStorage.setItem("oumur2", this.oumubiaoform.r2);
      window.localStorage.setItem("oumur3", this.oumubiaoform.r3);
      window.localStorage.setItem("oumur4", this.oumubiaoform.r4);
      window.localStorage.setItem("oumurx", this.oumubiaoform.rx);
      window.localStorage.setItem("oumup1", this.oumubiaoform.p1);
      window.localStorage.setItem("oumup2", this.oumubiaoform.p2);
      window.localStorage.setItem("oumupd1", this.oumubiaoform.pd1);
      window.localStorage.setItem("oumupd2", this.oumubiaoform.pd2);
      window.localStorage.setItem("oumupd3", this.oumubiaoform.pd3);
      this.$message({
        message: "暂存成功！",
        type: "success",
      });
      localStorage.setItem("state8", 2);
    },
    // 浏览器返回里面的暂存
    BackStorage() {
      const ra1 = sessionStorage.getItem("ra1");
      // console.log(ra1)
      this.oumubiaoform.ig1 = ra1;
      const ra2 = sessionStorage.getItem("ra2");
      this.oumubiaoform.rg1 = ra2;
      const ra3 = sessionStorage.getItem("ra3");
      this.oumubiaoform.e = ra3;
      const ra4 = sessionStorage.getItem("ra4");
      // console.log(ra1)
      this.oumubiaoform.r3 = ra4;
      const ra5 = sessionStorage.getItem("ra5");
      this.oumubiaoform.r4 = ra5;
      const ra6 = sessionStorage.getItem("ra6");
      this.oumubiaoform.rx = ra6;
      window.localStorage.setItem("oumugrade_xp", this.oumubiaoform.grade_xp);
      window.localStorage.setItem("oumuig1", this.oumubiaoform.ig1);
      window.localStorage.setItem("oumurg1", this.oumubiaoform.rg1);
      window.localStorage.setItem("oumue", this.oumubiaoform.e);
      window.localStorage.setItem("oumue1", this.oumubiaoform.e1);
      window.localStorage.setItem("oumui", this.oumubiaoform.i);
      window.localStorage.setItem("oumuig2", this.oumubiaoform.ig2);
      window.localStorage.setItem("oumur1", this.oumubiaoform.r1);
      window.localStorage.setItem("oumue2", this.oumubiaoform.e2);
      window.localStorage.setItem("oumurb", this.oumubiaoform.rb);
      window.localStorage.setItem("oumurg2", this.oumubiaoform.rg2);
      window.localStorage.setItem("oumur2", this.oumubiaoform.r2);
      window.localStorage.setItem("oumur3", this.oumubiaoform.r3);
      window.localStorage.setItem("oumur4", this.oumubiaoform.r4);
      window.localStorage.setItem("oumurx", this.oumubiaoform.rx);
      window.localStorage.setItem("oumup1", this.oumubiaoform.p1);
      window.localStorage.setItem("oumup2", this.oumubiaoform.p2);
      window.localStorage.setItem("oumupd1", this.oumubiaoform.pd1);
      window.localStorage.setItem("oumupd2", this.oumubiaoform.pd2);
      window.localStorage.setItem("oumupd3", this.oumubiaoform.pd3);
      this.$message({
        message: "暂存成功！",
        type: "success",
      });
      // localStorage.setItem("state8", 2);
    },
    // 获取暂存里面的数据
    storageCheck() {
      // const ra = window.localStorage.getItem("oumura");
      // this.oumubiaoform.ra = ra;
      // const grade_xp = window.localStorage.getItem("oumugrade_xp");
      // this.oumubiaoform.grade_xp = grade_xp;
      const ig1 = window.localStorage.getItem("oumuig1");
      this.oumubiaoform.ig1 = ig1;
      const rg1 = window.localStorage.getItem("oumurg1");
      this.oumubiaoform.rg1 = rg1;
      const e = window.localStorage.getItem("oumue");
      this.oumubiaoform.e = e;
      const e1 = window.localStorage.getItem("oumue1");
      this.oumubiaoform.e1 = e1;
      const i = window.localStorage.getItem("oumui");
      this.oumubiaoform.i = i;
      const ig2 = window.localStorage.getItem("oumuig2");
      this.oumubiaoform.ig2 = ig2;
      const r1 = window.localStorage.getItem("oumur1");
      this.oumubiaoform.r1 = r1;
      const e2 = window.localStorage.getItem("oumue2");
      this.oumubiaoform.e2 = e2;
      const rb = window.localStorage.getItem("oumurb");
      this.oumubiaoform.rb = rb;
      const rg2 = window.localStorage.getItem("oumurg2");
      this.oumubiaoform.rg2 = rg2;
      const r2 = window.localStorage.getItem("oumur2");
      this.oumubiaoform.r2 = r2;
      const r3 = window.localStorage.getItem("oumur3");
      this.oumubiaoform.r3 = r3;
      const r4 = window.localStorage.getItem("oumur4");
      this.oumubiaoform.r4 = r4;
      const rx = window.localStorage.getItem("oumurx");
      this.oumubiaoform.rx = rx;
      const p1 = window.localStorage.getItem("oumup1");
      this.oumubiaoform.p1 = p1;
      const p2 = window.localStorage.getItem("oumup2");
      this.oumubiaoform.p2 = p2;
      const pd1 = window.localStorage.getItem("oumupd1");
      this.oumubiaoform.pd1 = pd1;
      const pd2 = window.localStorage.getItem("oumupd2");
      this.oumubiaoform.pd2 = pd2;
      const pd3 = window.localStorage.getItem("oumupd3");
      this.oumubiaoform.pd3 = pd3;
      // for (var key in this.oumubiaoform) {
      //   // console.log(this.form2[key]);
      //   if (this.oumubiaoform[key] == "null") {
      //     this.oumubiaoform[key] = "";
      //     // return false;
      //   }
      // }
    }, // Rx上传截图
  },
}
</script>
<style scoped>
/* Rx截图上传 */
.Rxpicture {
  height: 100px;
  width: 150px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  height: 150px;
  display: block;
}
.photo {
  height: 100px;
  width: 200px;
  margin: 10px;
  margin-left: 80px;
  background-color: rgba(231, 231, 231, 0.663);
}
.notboder {
  border-top: 0px solid;
}
.nobboder {
  border-bottom: 0px solid;
}
.addmargin {
  margin: 10px 0px;
}
textarea {
  width: 100%;
  height: 200px;
}
.table input {
  width: 100px;
  border: none;
  outline: none;
}
table {
  position: relative;
  /* width: 500px; */
}
 
table,
td,
th {
  border: 0.2px solid rgb(15, 15, 15);
}
.all {
  height: 100%;
  width: 50%;
  min-width: 320px;
  margin: 0 auto;
}
/* .btn {
  width: 20%;
  margin-left: 40%;
  margin-bottom: 2vw;
} */
.btn {
  /* width: 20%;
  margin-left: 40%;
  margin-bottom: 2vw; */
  left: 0%;
  margin-bottom: 5%;
  bottom: 0%;
  width: 20%;
  transform: translate(120%, 30%);
}
.el-radio-group {
  margin: 10px;
}
.el-radio {
  padding: 5px;
}
</style>
